<template>
	<view class="tab-box" id="tab-box" v-if="tabList.length > 0">
		<view class="horizontal">
			<scroll-view :scroll-x="true"   style="white-space: nowrap; display: flex;" scroll-with-animation :scroll-left="slider.scrollLeft">
				<view  class="scrollView">
					<block v-for="(item, index) in tabList" :key="index" >
                        <!-- <view class="item" :class="{ active: activeIndex === index }" :id="'tab_'+index" @click="tabClick(index)">{{ item.text || item }}</view> -->
                        <view class="item" :class="{ active: activeIndex === index }" :id="'tab_'+index" @click="tabClick(index)"
                              :style="{color:activeIndex === index?highLightColor==''?'#00C759':highLightTextColor:null,color:activeIndex !== index?defaultColor==''?'#1C1C1C':defaultColor:null}">
                            {{ item.text || item }}
                        </view>
					</block>		
				</view>
				

				<view class="underline" :style="'transform:translateX(' + slider.left + 'px);width:' + slider.width + 'px'"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
        name: 'liuyuno-tabs',
		props: {
			tabData: {
				type: Array,
				default: () => []
			},
			defaultIndex: {
				type: Number,
				default: 0
			},
			underLinePadding: {
				type: Number,
				default: 10
			},
            // underLineType: { // 下划线的类型，长 中 短
			// 	type: String,
			// 	default: 'long'
            // },
            underLineWidth: {     //不能大于父盒子tab的宽度
				type: Number,
				default: 0
            },
            highLightColor: {     // 高亮的字体颜色
				type: String,
				default: ''
            },
            defaultColor:{ // 非高亮的字体颜色
                type:String,
                default:''
            }
		},
		data() {
			return {
				tabList: [],
				tabListSlider: [],
				box: {
					left: 0,
					right: 0,
					top: 0,
					width: 0,
					height: 0,
					bottom: 0,
				},
				slider: {
					left: 0,
					width: 0,
					scrollLeft: 0
				},
                activeIndex: 0,
                highLightTextColor:'',
                defaultTextColor:''
                // type:'',//下划线类型长中短
                // underLineLength:{
                //     long:null,
                //     middle:null,
                //     short: 40
                // }
			};
		},
		watch: {
			tabData(value) {
                this.tabList = value;
				setTimeout(() => {
					this.updateTabWidth();
				}, 0);
            },
            defaultIndex: function (value) {
                this.activeIndex = value
                this.tabToIndex(value);        
            },
		},
		mounted() {
			this.tabList = this.tabData;
			this.activeIndex = this.defaultIndex;
            //this.type = this.underLineType;
            this.highLightTextColor = this.highLightColor!==''?this.highLightColor+' !important':this.highLightColor;
            this.defaultTextColor = this.defaultColor;
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-box').boundingClientRect((res) => {
                    this.box = res;
					this.updateTabWidth();
				}).exec();
				
			}, 0);
			
		},
		methods: {
			
			tabClick(index) {
                this.activeIndex = index;
				this.tabToIndex(index);
				this.$emit('tabClick', index);
			},
			
			tabToIndex(index) {
                let _slider = this.tabListSlider[index];
				// this.slider = {
				// 	left: _slider.left + this.underLinePadding,
				// 	width: _slider.width - this.underLinePadding * 2,
				// 	scrollLeft: _slider.scrollLeft,
                // }
                // 如果是短类型
                // if(this.type == 'short'){
                //     let num =this.underLineLength.short/2;
                //     this.slider.left = _slider.left - num +this.underLinePadding
                // }
                 this.slider = {    
					left: this.underLineWidth != 0  ?  _slider.left  +  (_slider.width/2 - this.underLineWidth/2 - 2)  : _slider.left + this.underLinePadding , 
					width: this.underLineWidth != 0 ?  this.underLineWidth :   _slider.width - this.underLinePadding * 2  ,
					scrollLeft: _slider.scrollLeft,
				}
			},
			
			updateTabWidth(index = 0) {
				let data = this.tabList;
				
				if (data.length == 0) return false;
				
				const query = uni.createSelectorQuery().in(this);
                
				query.select('#tab_' + index).boundingClientRect((res) => {
                    let _prev_slider = this.tabListSlider[index - 1];
					this.tabListSlider[index] = {
						left: res.left - this.box.left,
						width: res.width ,     
						scrollLeft: res.left - this.box.left - (_prev_slider ? _prev_slider.width : 0),
                    }
                    // 如果是短类型
                    // if(this.type == 'short'){
                    //     this.tabListSlider[index].left = res.left - this.box.left + res.width/2;
                    //     this.tabListSlider[index].width = this.underLineLength.short;
                    // }
					if (this.activeIndex == index) {
						this.tabToIndex(this.activeIndex);
					}

					index++;
					if (data.length > index) {
						this.updateTabWidth(index);
					}
				}).exec();
			}
		}
	}
</script>

<style lang="scss">
	.tab-box {
		width: 100%;
		font-family:PingFang SC;
		font-weight:400;
		color:#474747;
		display: flex;
		height: 80rpx;
		background: #fff;
		font-size: 28rpx;
		// box-shadow: 0 2rpx  10rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		overflow: hidden;
		.active {
            //color: #00C759;
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
           // color: #333333 !important;
		}
		.horizontal {
			width: 100%;
			.item {
                font-size: 28rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                //color: #7A848E;
                display: inline-block;
				text-align: center;
				padding: 0 30rpx;
				height: 76rpx;
				line-height: 80rpx;
				// display: inline-block;
				// text-align: center;
				// padding: 0 30rpx;
				// height: 76rpx;
				// line-height: 80rpx;
			}
			.underline {
				height: 6rpx;
				background-color: #00C759;
				border-radius: 6rpx;
                transition: .5s;
                width: 40rpx;
			}
		}
	}
</style>
